import { FC, ReactElement, useCallback, useState } from "react";
import styled from "styled-components";
import Machining from "../components/HomePage/Machining";
import Material from "../components/HomePage/Material";

interface IProps {}

const HongPage: FC<IProps> = (): ReactElement => {
  const [cover, setCover] = useState<string | null>(null);

  const selectCover = useCallback(setCover, [setCover]);

  return (
    <Container>
      {/* 加工区 */}
      <Machining cover={cover} />
      {/* 材料区 */}
      <Material selectCover={selectCover} />
    </Container>
  );
};

export default HongPage;

const Container = styled.div`
  flex: 1;
  background: #fffae5;
  display: flex;

  & > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1rem;
  }

  & > div:first-child {
    align-items: center;
    justify-content: center;
    ::after {
      content: "";
      position: absolute;
      right: 0;
      height: 96%;
      top: 2%;
      width: 0.0625rem;
      background: #ccc;
    }
  }

  @media (max-width: 750px) {
    flex-direction: column;
    & > div:first-child {
      ::after {
        right: 2%;
        top: auto;
        bottom: 2%;
        width: 96%;
        height: 0.0625rem;
      }
    }
  }
`;
